<template>
  <div class="project3" :style="{backgroundImage: 'url('+ bg +')' }">
    <cheader :pageIndex="2"></cheader>
    <img src="./banner.png" alt="" class="banner">
    <div class="comic">
      <div class="c-titleWrap">
        <div class="c-title">
          <div class="t">
            <img src="@/common/img/ball4.png" alt="" class="img1">
            <img src="./ball.png" alt="" class="img2">
            <h2>康康战疫记</h2>
            <span class="l"></span>
            <span class="r"></span>
          </div>
        </div>
      </div>
      <ul>
        <li class="img1">
          <img src="./1.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank"></a> -->
          <button class="btn link1" :data-coe='0' @click="showInfo"></button>
        </li>
        <li class="img2">
          <img src="./2.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank" class="link1"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link2"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link3"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link4"></a> -->
          <button class="btn link1" :data-coe='1' @click="showInfo"></button>
          <button class="btn link2" :data-coe='2' @click="showInfo"></button>
          <button class="btn link3" :data-coe='3' @click="showInfo"></button>
          <button class="btn link4" :data-coe='4' @click="showInfo"></button>
        </li>
        <li class="img3">
          <img src="./3.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank" class="link1"></a>
          <a href="https://www.sjtu.edu.cn/" target="_blank" class="link2"></a> -->
          <button class="btn link1" :data-coe='5' @click="showInfo"></button>
          <button class="btn link2" :data-coe='6' @click="showInfo"></button>
        </li>
        <li class="img4">
          <img src="./4.png" alt="">
          <!-- <a href="https://www.sjtu.edu.cn/" target="_blank"></a> -->
          <button class="btn link1" :data-coe='7' @click="showInfo"></button>
        </li>
      </ul>
      <div class="btnGroup">
        <button @click="goToList(2, 1, 32)">
          <img src="./b1.png" alt="">
        </button>
        <button @click="goToList(2, 2, 33)">
          <img src="./b2.png" alt="">
        </button>
        <button @click="goToList(2, 3, 34)">
          <img src="./b3.png" alt="">
        </button>
      </div>
    </div>
    <div class="popup" @click.self="close" v-if="popupShow">
      <div class="content" v-if="dataArr.length">
        <h2>{{dataArr[dataCoe].title}}</h2>
        <font-awesome-icon icon="times" class="icon" @click="close"/>
        <div class="rich" v-html="dataArr[dataCoe].description">
        </div>
      </div>
    </div>
    <cfooter></cfooter>
  </div>
</template>
<script>
import cheader from '@/components/cheader/cheader'
import cfooter from '@/components/cfooter/cfooter'
import api from '@/common/js/api'
export default {
  data () {
    return {
      bg: require('@/common/img/bg.png'),
      dataArr: [],
      dataCoe: 0,
      popupShow: false
    }
  },
  watch: {
    popupShow (res) {
      if (res === true) {
        document.body.classList.add('noscroll')
      } else {
        document.body.classList.remove('noscroll')
      }
    }
  },
  created () {
    api.project3Index().then(res => {
      if (res.data.result === '0') {
        this.dataArr = res.data.data.illustation
      }
    })
  },
  methods: {
    // 去专题列表页 (专题几，第几个模块, 后端参数type, 后端参数id)
    goToList (project, blc, postType, postId) {
      this.$router.push({
        name: 'projectList',
        query: {
          project: project,
          blc: blc,
          postType: postType,
          postId: postId
        }
      })
    },
    close () {
      this.popupShow = false
    },
    showInfo (e) {
      this.dataCoe = e.target.dataset.coe
      this.popupShow = true
    }
  },
  components: {
    cheader,
    cfooter
  }
}
</script>
<style lang="scss" scoped>
  $projectBlue: #57a9d5;
  .project3 {
    background: no-repeat top center $projectBlue;
    .banner {
      display: block;
      width: 900px;
      height: 570px;
      margin: 0 auto;
    }
    .c-titleWrap {
      text-align: center;
      .c-title {
        display: inline-block;
        margin-bottom: 30px;
        .t {
          height: 58px;
          line-height: 58px;
          padding: 0 27px;
          position: relative;
          margin-bottom: 15px;
          .img1 {
            position: absolute;
            top: 0;
            left: 10px;
          }
          .img2 {
            position: absolute;
            bottom: 0;
            right: 15px;
          }
          h2 {
            font-size: 30px;
            color: #fff;
            font-weight: bold;
            position: relative;
          }
          span {
            display: inline-block;
            width: 6px;
            height: 6px;
            background-color: #ffe75f;
            position: absolute;
            bottom: 4px;
            &.l {
              left: 0;
            }
            &.r {
              right: 0;
            }
          }
        }
        .b {
          font-size: 24px;
          color: #fff;
          text-align: center;
        }
      }
    }
    .comic {
      width: 900px;
      margin: 0 auto 72px;
      ul {
        li {
          display: block;
          width: 900px;
          height: 500px;
          position: relative;
          margin-bottom: 30px;
          img {
            display: block;
          }
          .btn {
            display: block;
            // background-color: rgba($color: #000000, $alpha: .5);
            position: absolute;
            background-color: transparent;
            border: 0 none;
            cursor: pointer;
          }
          &.img1 {
            .btn {
              width: 450px;
              height: 60px;
              left: 16px;
              top: 62px;
            }
          }
          &.img2 {
            .link1 {
              width: 380px;
              height: 60px;
              right: 40px;
              top: 28px;
            }
            .link2 {
              width: 420px;
              height: 60px;
              left: 40px;
              top: 77px;
            }
            .link3 {
              width: 310px;
              height: 60px;
              right: 54px;
              top: 309px;
            }
            .link4 {
              width: 464px;
              height: 60px;
              left: 74px;
              top: 402px;
            }
          }
          &.img3 {
            .link1 {
              width: 520px;
              height: 60px;
              right: 50px;
              top: 44px;
            }
            .link2 {
              width: 320px;
              height: 60px;
              left: 44px;
              bottom: 20px;
            }
          }
          &.img4 {
            .btn {
              width: 406px;
              height: 60px;
              bottom: 50px;
              left: 84px;
            }
          }
        }
      }
      .btnGroup {
        display: flex;
        justify-content: space-between;
        button {
          border-radius: 10px;
          overflow: hidden;
          width: 275px;
          height: 150px;
          border: 0 none;
          cursor: pointer;
          box-shadow: 0 0 20px #000;
          padding: 0;
          transition: .3s all;
          &:hover {
            box-shadow: 0 0 30px #000;
          }
        }
      }
    }
    .popup {
      background: rgba($color: #000000, $alpha: .7);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
      .content {
        border-radius: 20px;
        background-color: #fff;
        width: 900px;
        height: 700px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -450px;
        margin-top: -350px;
        .icon {
          font-size: 30px;
          // background-color: red;
          padding: 10px;
          cursor: pointer;
          position: absolute;
          right: 10px;
          top: 10px;
        }
        h2 {
          color: #000;
          line-height: 36px;
          font-size: 24px;
          font-weight: bold;
          width: 810px;
          margin: 40px auto;
          box-sizing: border-box;
          padding-right: 50px;
        }
        .rich {
          width: 810px;
          height: 510px;
          margin: 0 auto;
          line-height: 30px;
          box-sizing: border-box;
          padding-right: 20px;
          // background-color: red;
          overflow-y: auto;
        }
      }
    }
  }
</style>
